<template>
	<view class="login">
		<image src="../../static/images/bg.png" class="background-wrapper"></image>
		<view class="login-header">
			<image src="../../static/images/bg1.png" class="main-bg"></image>
		</view>
		<view class="login-main">
			<view class="login-welcome">
				欢迎来到医生端
			</view>
			<view class="">
				<u--input placeholder="请输入手机号" type="number" maxlength=11 prefixIcon="account" :customStyle="inputStyle"
					prefixIconStyle="font-size:32rpx;color: #1D77FF;"></u--input>
			</view>
			<view class="input-pwd">
				<u--input placeholder="请输入密码" prefixIcon="lock" password :customStyle="inputStyle"
					prefixIconStyle="font-size:32rpx;color: #1D77FF;" suffixIconStyle="font-size:32rpx;color: #1D77FF;"
					suffixIcon="eye"></u--input>
			</view>
			<!-- <view class="">
				<u--input placeholder="请输入验证码" prefixIcon="email-fill" :customStyle="inputStyle" prefixIconStyle="font-size:32rpx;color: #1D77FF;">

					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取哈哈哈"></u-code>
						<u-button
												@tap="getCode"
												:text="tips"
												type="success"
												size="mini"
											></u-button>
					</template>
					
				</u--input>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
						@change="codeChange"></u-code>
						<u-button @tap="getCode">{{tips}}</u-button>
			</view> -->
			<view class="login-text">
				<view class="">
					忘记密码
				</view>
				<view class="">
					注册账户
				</view>
			</view>
			<view class="login-btn" @click="doLogin()">
				登录
			</view>
			<view class="other-login">
				其他登录方式
			</view>
			<view class="login-grid">
				<view class="login-item">
					<image src="../../static/images/phone.png" class="login-icon1"></image>
					<view class="login-name">验证码登录</view>
				</view>
				<view class="login-item">
					<image src="../../static/images/key.png" class="login-icon2"></image>
					<view class="login-name">一键登录</view>
				</view>
			</view>
			<view class="login-duty">
				<view class="login-duty-radio">
					<u-radio-group v-model="duty" @change="groupChange">
						<u-radio @change="radioChange"></u-radio>
					</u-radio-group>
				</view>
				<view class="login-duty-text">
					我已阅读并同意 <text>《用户隐私政策》</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['hostApi']),
		},
		data() {
			return {
				inputStyle: {
					"border": 'none',
					"height": "112rpx",
					"background": "#E5EFFF",
					"border-radius": "20rpx",
				},
				tips:'发送验证码'
			}
		},
		mounted() {

		},
		methods: {
			doLogin() {
				uni.$u.route('/pages/index/index');
			},
			getCode(){
				 uni.$u.toast('验证码已发送');
				            // 通知验证码组件内部开始倒计时
				           
			},
			 codeChange(text) {
			        this.tips = text;
			      },

		}
	};
</script>

<style scoped>
	.background-wrapper {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.login {
		overflow: hidden;
	}

	.main-bg {
		width: 320rpx;
		height: 348rpx;
	}

	.login-header {
		display: flex;
		justify-content: center;
		margin-top: 222rpx;
	}

	.login-welcome {
		text-align: center;
		width: 100%;
		height: 72rpx;
		font-family: Poppins, Poppins;
		font-weight: 400;
		font-size: 48rpx;
		color: #1D77FF;
		line-height: 72rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-bottom: 58rpx;
	}

	.login-main {
		padding: 0 50rpx;
	}

	.input-pwd {
		margin-top: 48rpx;
	}

	.login-btn {

		font-family: Poppins, Poppins;
		font-weight: 600;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		font-style: normal;
		text-transform: none;
		line-height: 100rpx;
		margin-top: 70rpx;
		width: 650rpx;
		height: 100rpx;
		background: #1D77FF;
		border-radius: 200rpx 200rpx 200rpx 200rpx;
	}

	.login-text {
		display: flex;
		justify-content: space-between;
		height: 34rpx;
		font-family: Poppins, Poppins;
		font-weight: 400;
		font-size: 24rpx;
		color: #1D77FF;
		margin-top: 16rpx;
		line-height: 34rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.other-login {
		margin-top: 62rpx;
		height: 28rpx;
		font-family: Poppins, Poppins;
		font-weight: 400;
		font-size: 28rpx;
		color: #999999;
		line-height: 28rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-bottom: 36rpx;
	}

	.login-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 40rpx;
		margin-top: 24rpx;
	}

	.login-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12rpx;
	}

	.login-icon2 {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-icon1 {
		width: 27rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.login-name {
		height: 26rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.login-duty {
		justify-content: center;
		display: flex;
		margin-top: 128rpx;

	}

	.login-duty-text {
		margin-top: 5rpx;
		height: 26rpx;
		font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
		font-weight: 400;
		font-size: 26rpx;
		color: #999999;
		line-height: 26rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.login-duty-radio {
		width: 30px;
		display: inline-block;
		height: 30px;
	}

	.login-duty-text>text {
		color: #1D77FF;
		cursor: pointer;
	}
</style>